<template>
  <div class="article-content__module clearfix">
    <div class="content__wrapp">
      <header class="article-title__item">{{title}}</header>
      <div class="meta__group">
        <span class="i-time">{{createdTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
        <span>点击: {{hit}}</span>
        <span>
          分类:
          <mivaLink class="link__item" to="/">{{className}}</mivaLink>
        </span>
      </div>
      <img :src="cover" class="cover__item" />
      <p class="content__wrapper editor-style" v-html="content" />
    </div>
  </div>
</template>

<script>
import { loadCss } from '@/utils';

export default {
    name: 'ArticleContnetModule',
    props: {
        article: {
            type: Object,
            default: () => ({}),
        },
    },
    computed: {
        cover() {
            return this.article.cover;
        },
        title() {
            return this.article.title;
        },
        createdTime() {
            return this.article.created_at;
        },
        content() {
            return this.article.content;
        },
        hit() {
            return this.article.hit;
        },
        className() {
            return this.article.className;
        },
    },
    created() {
        loadCss('https://cdn.bootcdn.net/ajax/libs/simditor/2.3.28/styles/simditor.css');
    },
};
</script>

<style lang="less" >
.article-content__module {
  margin: auto;
  padding: 20px;
  border: 5px solid @base_color;
  box-shadow: 5px -5px 0px @base_color_2;
  background-color: fade(#fff, 90%);
  .content__wrapp {
    padding: 20px;
    .cover__item {
      width: 100%;
      margin-bottom: 20px;
    }
  }
  .article-title__item {
    padding: 12px 50px 12px 0;
    border: 0;
    font-size: 28px;
  }
  .meta__group {
    margin: 20px 0;
    color: #999;
    display: flex;
    align-items: center;
    > span {
      margin-right: 20px;
      display: flex;
      align-items: center;
    }
    .link__item {
      padding-left: 5px;
      color: #999;
    }
    .link__item:hover {
      color: @base_color;
    }
  }
}
</style>
